import { Table } from 'antd';
import { useVT } from 'virtualizedtableforantd4';
import PropTypes from 'prop-types';

const BasicTable = ({
  dataSource,
  columns,
  scroll,
  rowKey,
  onExpand,
  bigTable,
  rowClassName,
  onChange,
  locale,
  expandedRowRender,
  loading,
  defaultExpandAllRows,
  defaultExpandedRowKeys,
  onExpandedRowsChange,
  showHeader,
  rowSelection,
  footer,
  onRow,
  pagination,
  expandedRowKeys,
  expandable,
  components, // 用于编辑表格使用 无法与虚拟表格插件同时使用
}) => {
  const [vt] = useVT(
    () => ({
      scroll,
    }),
    [scroll?.y],
  );

  return (
    <Table
      columns={columns}
      dataSource={dataSource}
      rowClassName={rowClassName}
      components={bigTable ? vt : components || {}} // id一定是number类型，若有多个table用到了这个插件，记得id要不一样，不然会有问题。
      scroll={scroll} // 必须设置滚动高度 这里y:500是确定了这个table的高度为500，加载完数据后，就展示500高度的数据，当向下滑动滚动条后，就开始加载后面的数据。这样就解决了table数据过多的性能问题了。
      onChange={onChange}
      locale={locale}
      rowKey={rowKey}
      expandable={
        expandable
          ? expandable
          : {
              onExpand,
              expandedRowRender,
              expandedRowKeys,
              defaultExpandAllRows,
              defaultExpandedRowKeys,
              onExpandedRowsChange,
            }
      }
      loading={loading}
      showHeader={showHeader}
      onRow={onRow}
      rowSelection={rowSelection}
      footer={footer}
      pagination={pagination}
    />
  );
};
BasicTable.propsTypes = {
  bigTable: PropTypes.bool, // 使用不分页大数据表格
  columns: PropTypes.array, // 列信息(title和key是必填)（支持设置三类type:1)money 2)number 3)rate 4)operate，其他有关样式上的需求，自行添加render）
  dataSource: PropTypes.array, // 数据源
  scroll: undefined, // 横向或纵向滚动条
  onChange: () => {}, // 表格所有的操作变化时 回调
  onExpand: (expanded, record) => {}, // 点击展开图标时触发
  onRow: (record) => {}, // 行选中属性
  expandedRowKeys: PropTypes.array, // 展开的节点
  rowKey: PropTypes.string, // 设置唯一的key
  rowClassName: PropTypes.oneOfType([
    // 设置行样式
    PropTypes.string,
    PropTypes.func,
  ]),
  loading: PropTypes.bool, // 加载中状态
  rowSelection: PropTypes.object, // 表格行是否可选择
  expandedRowRender: () => {}, // 展开的嵌套内容渲染
  showHeader: PropTypes.bool, // 是否展示表头
  footer: () => {}, // 表格底部内容
  defaultExpandAllRows: PropTypes.bool, // 是否默认展开所有子项
  defaultExpandedRowKeys: PropTypes.array, // 默认展开的节点
  onExpandedRowsChange: (expandedRows) => {}, // 展开的行变化时触发
  expandable: PropTypes.any, // 嵌套表格组件传的是标准的展开对象
};
export default BasicTable;
